<template>
  <div class="register-container" style="background-color: #86d7b0">
    <h2>创建您的账号</h2>
    <div class="form-group">
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="form.username" placeholder="请输入用户名" />
    </div>
    <div class="form-group">
      <label for="username">号码：</label>
      <input type="text" id="number" v-model="form.username" placeholder="请输入号码" />
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" v-model="form.password" placeholder="请输入密码" />
    </div>
    <div class="form-group">
      <label for="confirmPassword">确认密码：</label>
      <input type="password" id="confirmPassword" v-model="form.confirmPassword" placeholder="请再次输入密码" />
    </div>
    <button @click="handleRegister">注册</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import myaxios from '@/Axios/myaxios'

// 定义表单数据对象
const form = ref({
  username: '',
  password: '',
  confirmPassword:''
});

const router = useRouter();

const handleRegister = async () => {

  const response = await myaxios.post('/api/user/register', {
    userAccount: form.value.username,
    userPassword: form.value.password,
    checkPassword: form.value.confirmPassword
  })

  console.log(response.data)
  // 简单的前端验证
  if (form.value.password!== form.value.confirmPassword) {
    alert('密码和确认密码不一致，请重新输入！');
    return;
  }
  if (form.value.username === '') {
    alert('用户名不能为空');
    return;
  }

  // 模拟注册请求成功（实际需对接后端 API）
  try {
    // 这里可替换为真实的网络请求库（如 axios）发送请求到后端



    // 注册成功提示
    alert('注册成功！');
    // 跳转到登录页面
    router.push({ path: '/login' });
  } catch (error) {
    console.error('注册失败：', error);
    alert('注册失败，请稍后再试');
  }
};
</script>

<style scoped>
.register-container {
  width: 400px;
  margin: 200px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: inline-block;
  width: 80px;
}

input {
  width: 200px;
}

button {
  width: 100px;
  height: 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
</style>
